<template>
  <div>
    <!-- 菜单管理 -->
    <div class="gva-table-box">
      <div>
        <el-form :inline="true" :model="searchData">
          <el-form-item label="父级菜单">
            <el-select v-model="searchData.parentId" label="父级菜单" filterable placeholder="请选择" @change="getList">
              <el-option label="查询所有" value=""/>
              <el-option label="一级菜单" value="0"/>
              <el-option v-for="item in mainMenus" :key="item.menuId" :label="item.title" :value="item.menuId"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!--          <el-button type="primary" icon="search" @click="getList">查询</el-button>-->
            <el-button icon="refresh" @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="gva-btn-list">
        <el-button icon="plus" type="primary" @click="dialogState = true, isAdd = true">添加菜单</el-button>
      </div>

      <!-- 表格区域 -->
      <el-table v-loading="loading" :data="tableData" row-key="menuId"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
      >
        <!-- <el-table-column prop="menuId" label="菜单 ID" width="120"></el-table-column> -->
        <el-table-column prop="title" width="160" label="菜单标题"/>
        <el-table-column prop="name" width="180" label="菜单名称"/>
        <el-table-column prop="component" label="组件路径" width="295"/>
        <el-table-column prop="path" label="路由地址"/>
        <!--        <el-table-column prop="redirect" label="默认地址"/>-->
        <el-table-column prop="icon" label="菜单图标" width="180"/>
        <el-table-column prop="address" label="操作" width="160">
          <!-- 动态插入id -->
          <template #default="scope">
            <el-button type="primary" icon="edit" plain link
                       @click="dialogState = true, isAdd = false,updateBtn(scope.row)">修改
            </el-button>
            <el-button type="danger" icon="delete" link plain @click="delBtn(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/修改模态框 -->
    <el-dialog :title="isAdd ? '新增菜单' : '修改菜单'" v-model="dialogState"
               width="25%" draggable :append-to-body="true">
      <el-form :inline="true">
        <el-form-item label="菜单标题:">
          <el-input v-model="from.title" placeholder="菜单标题"/>
        </el-form-item>
        <el-form-item label="菜单名称:">
          <el-input v-model="from.name" placeholder="菜单名称"/>
        </el-form-item>
        <el-form-item label="父级菜单:">
          <el-select v-model="from.parentId" placeholder="选择父级菜单"
                     style="width: 180px">
            <el-option label="一级菜单" value="0"/>
            <el-option v-for="item in mainMenus" :key="item.menuId" :label="item.title" :value="item.menuId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="组件路径:">
          <el-input v-model="from.component" placeholder="组件路径"/>
        </el-form-item>
        <el-form-item label="路由地址:">
          <el-input v-model="from.path" placeholder="路由地址"/>
        </el-form-item>
        <!--        <el-form-item label="默认地址:">-->
        <!--          <el-input v-model="from.redirect" placeholder="有index时可为空"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="菜单图标:">
          <el-input v-model="from.icon" placeholder="菜单图标"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogState = false">取 消</el-button>
          <el-button type="primary" @click="isAdd?addBtn():updateTrue()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {addMenu, deleteMenu, getMenuList, updateMenu} from '@/api/menu'
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      from: {
        menuId: '',
        parentId: '',
        title: '',
        name: '',
        component: '',
        path: '',
        redirect: '',
        icon: ''
      },
      tableData: [],
      mainMenus: [],
      dialogState: false,
      searchData: {
        title: '',
        parentId: ''
      },
      page: 1,
      limit: 999,
      total: 0,
      isAdd: false,
      loading: true
    }
  },
  watch: {
    dialogState: function (val) {
      if (val === false) {
        this.getList()
        this.from = {}
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {

    // 重置按钮
    clear() {
      this.searchData = {title: '', parentId: ''}
      this.getList()
    },
    // 获取表格数据
    async getList() {
      this.loading = true
      await this.getMainMenus()
      const res = await getMenuList({...this.searchData, page: this.page, pageSize: this.limit})
      const mMenus = res.data.records.filter(item => item.parentId === '0')
      const childs = res.data.records.filter(item => item.parentId !== '0')
      this.tableData = mMenus
      this.tableData.forEach(li => {
        const children = childs.filter(child => child.parentId === li.menuId)
        if (children.length !== 0) {
          li.children = children
        }
      })
      this.loading = false
    },
    // 添加
    addBtn() {
      addMenu(this.from).then((res) => {
        if (res.code === 0) {
          ElMessage({type: 'success', message: res.msg})
          this.dialogState = false
          this.getList()
          this.from = {}
        }
      })
    },
    // 删除
    delBtn(row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu(row.menuId).then((res) => {
          if (res.code === 0) {
            ElMessage({type: 'success', message: res.msg})
            this.cleanMainMenu()
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改
    updateBtn(row) {
      this.from = row
    },
    // 确定修改的按钮事件
    updateTrue() {
      updateMenu(this.from).then((res) => {
        if (res.code === 0) {
          ElMessage({type: 'success', message: res.msg})
          this.dialogState = false
          this.cleanMainMenu()
          this.getList()
          this.from = {}
        }
      })
    },
    // 获取主菜单
    async getMainMenus() {
      if (this.mainMenus.length === 0) {
        const res = await getMenuList({page: 1, pageSize: 999})
        this.mainMenus = await res.data.records.filter(item =>
            item.parentId === '0')
      }
    },
    // 清除一级菜单
    cleanMainMenu() {
      if (this.from.parentId === '0') {
        this.mainMenus = []
        // this.getMainMenus()
      }
    }
  }
}
</script>

<style lang="scss">
.header-img-box {
  @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
}
</style>
